<html>
<head>
    <title>jQuery 动态增删表格</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function(){
		var addToTrTop = 10;
		var addToTrLeft = 534;
		var preEdit = null;
		var inputData = '<input id="tmpEditor" type="text" value="?"></input>';		
        var bindListening = function(){
            //表格点击响应
            $("td").unbind().click(function(){
				var tdData = $("#tmpEditor").val();
				if( !$(this).parent().hasClass('editting')) {
					preEdit&&preEdit.empty().html(tdData.trim(' '));
					preEdit = null;
					$("#tmpEditor").parent().empty().html($("#tmpEditor").val());
					$(".editting").removeClass('editting');
				}else if( preEdit && (preEdit.parent().children().index($(preEdit)) != $(this).parent().children().index($(this))) ){
					preEdit.empty().html(tdData.trim(' '));
					preEdit = null;
				}else{
					if(!$("#tmpEditor").val()) {
						preEdit = $(this);
						var tdData = $(this).html();
						$(this).empty().append(inputData.replace('?',tdData));
						$("#tmpEditor").focus();
					}
				}
				if(!$(this).parent().hasClass('editting')){
					var tipStyle = 'top:'+(parseInt($(this).offset().top)+addToTrTop)+'px;left:'+(parseInt($(this).parent().offset().left)+addToTrLeft)+'px;';
					$("#clickTips").attr('style',tipStyle).show();
				}
				bindListening();
            });

            //向上增加一行
            $("#addUp").unbind().click(function(){
                doAddTrData($(this),'up');
                bindListening();
            });

            //向下增加一行
            $("#addDown").unbind().click(function(){
                doAddTrData($(this),'down');
                bindListening();
            });

            //删除当前行
            $("#delete").unbind().click(function(){
                doDeleteTrData($(this),'delete');
                bindListening();
            });

			//编辑当前行
            $("#edit").unbind().click(function(){
                doEditTrData($(this),'edit');
                bindListening();
            });

			var addTrData = $("tr:first").clone(true).attr('class','newAdd');
            var getIndex = function(clickedTd,type){
                var fields = $("tr");
                var addIndex = -1;
                for(var i=1;i<fields.length;i++){
                    var tipStyle = clickedTd.parent().attr('style');
                    var topValue = 'top: '+(parseInt(fields.eq(i).offset().top)+addToTrTop);
                    var ie_topValue = 'top: '+(parseInt(fields.eq(i).offset().top)+(addToTrTop-2));
                    if((tipStyle.indexOf(topValue) != -1) || (tipStyle.indexOf(ie_topValue) != -1)) {
                        switch(type.toLowerCase()){
                            case 'up':
                                addIndex = i-1;
                                break;
                            case 'down':
                            case 'edit':
                            case 'delete':
                                addIndex = i;
                                break;
                        }
                    }
                }
                return addIndex;
            };

            var doAddTrData = function(clickedTd,type){
                if(getIndex(clickedTd,type) == -1) return false;
                else {
                    var index=getIndex(clickedTd,type);
                }
                $("table tr").eq(index).after(addTrData);
                setTimeout('$(".newAdd").attr("class",null)',1000);
                $("#clickTips").hide();
                return false;
            };

            var doDeleteTrData = function(clickedTd,type){
                if(getIndex(clickedTd,type) == -1) return false;
                else {
                    var index=getIndex(clickedTd,type);
                }
                $("table tr").eq(index).remove();
                $("#clickTips").hide();
                return false;
            };

			var doEditTrData = function(clickedTd,type){
                if(getIndex(clickedTd,type) == -1) return false;
                else {
                    var index=getIndex(clickedTd,type);
                }
                $("table tr").eq(index).addClass('editting');
                $("#clickTips").hide();
                return false;
        };
    };
        bindListening();
    });
</script>
<style type="text/css">
table{
    width:580px;
    margin:0 auto;
}
td,#tmpEditor{
    display:block;
    float:left;
    border:1px solid #000000;
    margin:auto 0.5px;
    width:60px;
    height:20px;
}
#clickTips{
    border:1px solid #000000;
	position:absolute;
	left:3px;
	width:120px;
	padding:3px;
	display:none;
	background-color:#F5FFFA;
	z-index:3;
}
span{
    float:left;
    width:100px;
    height:20px;
    clear:both;
}
.cloneTr{
    display:none;
}
.newAdd td{
    background-color:#FFFACD;
}
.editting td{
    background-color:#F0F0F0;
}
</style>
<div id="tableContainer">
    <table>
        <tr class="cloneTr">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>1</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>2</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>3</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>4</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>5</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>6</td>
        </tr>
    </table>
</div>
<div id="clickTips">
    <span id="addUp">向上增加一行</span>
    <span id="edit">修改当前一行</span>
    <span id="addDown">向下增加一行</span>
    <span id="delete">删除当前行</span>
</div>
</body>
</html>